<template>
  <div>
    <p>1.获取所有的图书学习</p>
    <button @click="getAllFn">获取图书信息</button>
    <hr>
    <p>2.查询书籍信息</p>
    <input type="text" placeholder="输入查询的书籍名"
    v-model="bName">
    <button @click="findFn">查询书籍</button>
    <hr>
    <p>3.添加书籍信息</p>
    <input type="text" placeholder="书名" v-model="bookObj.bookname">
    <input type="text" placeholder="作者" v-model="bookObj.author">
    <input type="text" placeholder="出版社" v-model="bookObj.publisher">
    <button @click="subFn">添加书籍</button>
  </div>
</template>

<script>
import axios from "axios"
// 全局配置
axios.defaults.baseURL = "http://123.57.109.30:3006/"
export default {
  // 目标：获取所有的图书信息
  // 下载axios
  data(){
    return{
      bName:"",
      bookObj:{
        bookanme:"",
        author:"",
        publisher:"",
      }
    }
  },
   methods:{
     getAllFn(){
        // 发起axios请求
        axios({
          url:'api/getbooks',
          method:'GET', //默认就是get方式请求
        }).then(res=>{
          console.log(res)
        })
        // axios() - 原地的到 Promise 对象
     },
     findFn(){
       axios({
          url:'api/getbooks',
          method:'GET',
          params:{ //都会被axios最终凭借到url?后面
            bookname:this.bName
          }
       }).then(res=>{
         console.log(res)
       })
     },
     subFn(){
       axios({
         url:'api/addbook',
         method:'POST',
         data:{
           appkey:'7250d3eb-18e1-41bc-8bb2-11483665535a',
           ...this.bookObj
          //  bookname:this.bookObj.bookanme,
          //  author:this.bookObj.author,
          //  placeholder:this.bookObj.placeholder
         }
       })
     }
   }
}
</script>

<style>

</style>